<template>
	<div class="heightall" style="width: 100%">
		<sh-table
			ref="shtable"
			height="auto"
			:loading="tableLoading"
			:columns="tableColumns"
			:data-sourse="tableDataSourse"
			:global-config="tableGlobalConfig"
			:pager-config="tablePagerConfig"
			:edit-rules="tableEditRules"
			:disabled="!tableEdit"
			:edit-config="tableEditConfig"
			:column-obj="tableColumnObj"
			show-footer
			@selection-change="onSelectChange"
			@page-change="onPageChange"
			@form-submit="onFormSubmit"
			@load-finished="onTableFinished"
			@edit-closed="onTableEditClosed">
			<template #toolbarRight>
				<vxe-switch v-model="tableEdit" open-label="开启编辑" close-label="关闭编辑"></vxe-switch>
			</template>
		</sh-table>
	</div>
</template>

<script>
const sexOptions = [
	{ value: '1', label: '男', tagColor: 'geekblue', tagType: '' },
	{ value: '0', label: '女', tagColor: 'magenta', tagType: '' }
]
const jgOptions = [
	{ id: '1', label: '北京' },
	{ id: '2', label: '黑龙江' },
	{ id: '3', label: '吉林' },
	{ id: '4', label: '辽宁' },
	{ id: '5', label: '山东' },
	{ id: '6', label: '陕西' },
	{ id: '7', label: '山西' },
	{ id: '8', label: '湖南' },
	{ id: '9', label: '湖北' },
	{ id: '10', label: '上海' },
	{ id: '11', label: '广东' },
	{ id: '12', label: '广西' }
]
const interestOptions = [
	{ value: '1', label: '前端' },
	{ value: '0', label: '后端' }
]
const gloryOptions = [
	{ value: '1', label: '在职' },
	{ value: '0', label: '离职' }
]
const isOptions = [
	{ value: '1', label: '是' },
	{ value: '0', label: '否' }
]
export default {
	name: 'BaseTable',
	data() {
		return {
			tableLoading: false,
			tableEdit: true,
			tableEditConfig: {},
			tableGlobalConfig: {
				tableName: '这个表格那个表格',
				title: true, // 是否显示 tableName
				seq: true, // 是否展示序号列
				ghost: false, // 是否开启透明
				search: true, // 表格是否开启查询，默认不开启，根据columns配置字段 search 为 true
				globalFilter: true, // 表格是否开启全局过滤
				zoom: true, // 表格是否开启缩放
				tools: ['import', 'export', 'print']
			},
			tableColumns: [
				{
					title: '$vInput渲染',
					field: 'vInputs',
					children: [
						{
							title: '基本用法',
							field: 'inputBase',
							readonly: true,
							renderName: '$vInput',
							search: true
						},
						{
							title: '数字类型',
							field: 'inputNumber',
							renderName: '$vInput',
							renderProps: {
								type: 'number'
							}
						},
						{
							title: '+-控制',
							field: 'inputControl',
							search: true,
							renderName: '$vInput',
							renderProps: {
								type: 'number',
								control: true
							}
						}
					]
				},
				{
					title: '$vSelect渲染',
					field: 'vSelects',
					children: [
						{
							title: '基本用法',
							field: 'selectBase',
							renderName: '$vSelect',
							renderProps: {
								options: sexOptions
							},
							search: true
						},
						{
							title: '标签显示',
							field: 'selectTag',
							renderName: '$vSelect',
							renderProps: {
								options: sexOptions,
								showType: 'tag'
							}
						}
					]
				},
				{
					title: '$vTree渲染',
					field: 'vTrees',
					children: [
						{
							title: '基本用法',
							field: 'treeBase',
							renderName: '$vTree',
							renderProps: {
								nodeKey: 'id',
								options: jgOptions
							},
							search: true
						},
						{
							title: '显示格式化',
							field: 'treeFormat',
							renderName: '$vTree',
							renderProps: {
								nodeKey: 'id',
								options: jgOptions,
								labelFormat: '{id}-{label}'
							}
						},
						{
							title: '多选',
							field: 'treeMultiple',
							search: true,
							renderName: '$vTree',
							renderProps: {
								nodeKey: 'id',
								options: jgOptions,
								multiple: true
							}
						}
					]
				},
				{
					title: '$vTime渲染',
					field: 'vTimes',
					children: [
						{
							title: '基本用法',
							field: 'timeBase',
							renderName: '$vTime',
							renderProps: {}
						},
						{
							title: '起始时间(联动)',
							field: 'timeStart',
							renderName: '$vTime',
							renderProps: {
								endTime: '{timeEnd}'
							}
						},
						{
							title: '截止时间(联动)',
							field: 'timeEnd',
							renderName: '$vTime',
							renderProps: {
								startTime: '{timeStart}'
							}
						}
					]
				},
				{
					title: 'vProgress渲染',
					field: 'vProgresss',
					children: [
						{
							title: '基本用法',
							field: 'progressBase',
							renderName: '$vProgress',
							renderProps: {}
						}
					]
				},
				{
					title: 'vSwitch渲染',
					field: 'vSwitchs',
					children: [
						{
							title: '基本用法',
							field: 'switchBase',
							renderName: '$vSwitch',
							renderProps: {
								options: isOptions
							}
						}
					]
				},
				{
					title: 'vMoney渲染',
					field: 'vMoneys',
					children: [
						{
							title: '基本用法',
							field: 'moneyBase',
							search: true,
							renderName: '$vMoney',
							renderProps: {}
						},
						{
							title: '万元单位',
							field: 'moneyUnit',
							search: true,
							renderName: '$vMoney',
							renderProps: {
								moneyUnit: 10000
							}
						},
						{
							title: '分割显示',
							field: 'moneyBill',
							renderName: '$vMoney',
							renderProps: {
								bill: true
							}
						},
						{
							title: '公式计算(基本用法+分割显示)',
							field: 'moneyCaculate',
							width: 200,
							renderName: '$vMoney',
							renderProps: {
								formula: '{moneyBase}+{moneyBill}'
							}
						}
					]
				},
				{
					title: 'vCheckgroup渲染',
					field: 'vCheckgroups',
					children: [
						{
							title: '基本用法',
							field: 'checkBase',
							search: true,
							renderName: '$vCheckgroup',
							renderProps: {
								options: interestOptions
							}
						}
					]
				},
				{
					title: 'vRadiogroup渲染',
					field: 'vRadiogroups',
					children: [
						{
							title: '基本用法',
							field: 'radioBase',
							renderName: '$vRadiogroup',
							renderProps: {
								options: gloryOptions
							}
						}
					]
				},
				{
					title: 'vImg渲染',
					field: 'vImgs',
					children: [
						{
							title: '基本用法',
							field: 'imgBase',
							renderName: '$vImg',
							renderProps: {}
						}
					]
				},
				{
					title: 'vHref渲染',
					field: 'vHrefs',
					children: [
						{
							title: '基本用法',
							field: 'hrefBase',
							renderName: '$vHref',
							renderProps: {}
						}
					]
				}
			],
			tableDataSourse: [],
			tablePagerConfig: {
				total: 100
			},
			tableColumnObj: {
				width: 160
			},
			tableEditRules: {
				inputBase: [{ required: true, message: '请输入', trigger: 'change' }],
				selectBase: [{ required: true, message: '请输入', trigger: 'change' }],
				treeBase: [{ required: true, message: '请输入', trigger: 'change' }],
				timeBase: [{ required: true, message: '请输入', trigger: 'change' }],
				progressBase: [{ required: true, message: '请输入', trigger: 'change' }],
				switchBase: [{ required: true, message: '请输入', trigger: 'change' }],
				moneyBase: [{ required: true, message: '请输入', trigger: 'change' }],
				checkBase: [{ required: true, message: '请输入', trigger: 'change' }],
				radioBase: [{ required: true, message: '请输入', trigger: 'change' }]
			}
		}
	},
	created() {},
	mounted() {
		this.getTableData()
	},
	methods: {
		getRandomValue(options, key = 'value') {
			let randomIndex = this.$vUtils.floor(this.$vUtils.random(0, options.length - 1))
			return options[randomIndex][key]
		},
		getTableData() {
			let data = []
			this.tableDataSourse = []
			this.tableLoading = true
			for (let i = 0; i <= 200; i++) {
				data.push({
					id: i,
					inputBase: '大撒大' + i,
					inputNumber: 56 * Math.random(),
					inputControl: 56 * Math.random(),
					selectBase: this.getRandomValue(sexOptions),
					selectTag: this.getRandomValue(sexOptions),
					treeBase: this.getRandomValue(jgOptions, 'id'),
					treeFormat: this.getRandomValue(jgOptions, 'id'),
					treeMultiple: this.getRandomValue(jgOptions, 'id'),
					timeBase: `2023-05-${i + 1} 19:32:22`,
					progressBase: 50 * Math.random(),
					switchBase: this.getRandomValue(isOptions),
					moneyBase: 7832 * Math.random(),
					moneyUnit: 34543 * Math.random(),
					moneyBill: 6452 * Math.random(),
					checkBase: this.getRandomValue(interestOptions),
					radioBase: this.getRandomValue(gloryOptions),
					imgBase: '/files/test.png',
					hrefBase: 'www.123.com'
				})
			}
			setTimeout(() => {
				this.tableLoading = false
				this.tableDataSourse = data
			}, 200)
		},
		onPageChange({ currentPage, pageSize }) {
			Object.assign(this.tablePagerConfig, { currentPage, pageSize })
		},
		onFormSubmit(obj) {},
		onSelectChange(obj) {},
		onTableFinished() {},
		onTableEditClosed(obj) {}
	}
}
</script>

<style scoped></style>
